Sob Theme
Multipurpose Template
- Created: 25/08/2021
- Latest Update: 25/08/2021
- by: CodexCoder
- email: support@codexcoder.com
Installation
Follow the steps below to get started with Sob Theme Multipurpose HTML Template :
-
Open the
Package/sob-themeFolder to find all the Templates Files - You will need to Upload these files to your Web Server using FTP or cPanle in order to use it on your Website.
-
Make sure you have upload the required files and folders listed below:
-
sob-theme HTML/assets- Stylesheets, JavaScript, Fonts etc Folder -
sob-theme HTML/assets/images- Images Folder -
sob-theme HTML/index.html- Index File/Homepage
-
- You're now ready to go..! Start adding your Content and show off your Brand New Website.
Features At A Glance
- HTML5 & CSS3 & jQuery
- Modern And Creative Design
- Universal menu
- 100% Responsive
- Well documented
- Complete SASS files
- Bootstrap
- Icofonts Used
- NstSlider Used
- Google Font Used
- Lightcase Used
- Google Map
- Eye Catching Design
- W3C Valid Code
HTML Structure
Sob Theme has follows a simple coding structure. here is the sample:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Sob</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="#">
<link rel="stylesheet" href="assets/css/vendors/normalize.css">
<link rel="stylesheet" href="assets/css/vendors/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/plugins/all.min.css">
<link rel="stylesheet" href="assets/css/plugins/animate.css">
<link rel="stylesheet" href="assets/css/plugins/lightcase.css">
<link rel="stylesheet" href="assets/css/plugins/swiper-bundle.min.css">
<link rel="stylesheet" href="assets/css/plugins/icofont.min.css">
<link rel="stylesheet" href="assets/css/preloder.css">
<link rel="stylesheet" href="assets/css/demo-view.css">
<link rel="stylesheet" href="assets/css/main.min.css">
</head>
<body>
<div class="preloader">
<div class="preloader-area">
<h2>Sob <span>Theme</span></h2>
<div class="loading"></div>
</div>
</div>
<div class="search-area">
<div class="search-input">
<div class="search-close">
<span></span>
<span></span>
</div>
<form>
<input type="text" name="text" placeholder="*Search Here">
</form>
</div>
</div>
<header class="header-section style-home-index">
<div class="header-top">
<div class="container">
<div class="header-top-area">
<ul class="left">
<li>
<i class="icofont-ui-call"></i> <span>+800-123-4567 6587</span>
</li>
<li>
<i class="icofont-location-pin"></i> Beverley, New York 224 USA
</li>
</ul>
<ul class="social-icons d-flex align-items-center">
<li>
<p>
Find us on :
</p>
</li>
<li>
<a href="#" class="fb"><i class="icofont-facebook-messenger"></i></a>
</li>
<li>
<a href="#" class="twitter"><i class="icofont-twitter"></i></a>
</li>
<li>
<a href="#" class="vimeo"><i class="icofont-vimeo"></i></a>
</li>
<li>
<a href="#" class="skype"><i class="icofont-skype"></i></a>
</li>
<li>
<a href="#" class="rss"><i class="icofont-rss-feed"></i></a>
</li>
</ul>
</div>
</div>
</div>
<div class="header-bottom">
<div class="container">
<div class="header-wrapper">
<div class="logo">
<a href="index.html">
<img src="assets/images/logo/logo.png" alt="logo">
</a>
</div>
<div class="menu-area">
<ul class="menu">
<li>
<a href="#0" class="active">Demos</a>
<ul class="submenu">
<li><a href="index.html" class="active">Sob Classic</a></li>
<li>
<a href="#0">Sob Event</a>
<ul class="submenu">
<li><a href="index-event.html" target="_blank">Sob Event 1</a></li>
<li><a href="coming-soon.html" target="_blank">Sob-Event-2(coming soon)</a></li>
</ul>
</li>
<li>
<a href="#0">Sob Medical</a>
<ul class="submenu">
<li><a href="index-medical-v1.html" target="_blank">Sob-Medical Home-1</a></li>
<li><a href="index-medical-v2.html" target="_blank">Sob-Medical Home-2</a></li>
</ul>
</li>
<li>
<a href="#0">Sob Agriculture</a>
<ul class="submenu">
<li><a href="index-agriculture-v1.html" target="_blank">Sob-Agriculture Home-1</a></li>
<li><a href="index-agriculture-v2.html" target="_blank">Sob-Agriculture Home-2</a></li>
<li><a href="index-agriculture-v3.html" target="_blank">Sob-Agriculture Home-3</a></li>
</ul>
</li>
<li>
<a href="#0">Sob Charity</a>
<ul class="submenu">
<li><a href="index-charity-v1.html" target="_blank">Sob-Charity Home-1</a></li>
<li><a href="index-charity-v2.html" target="_blank">Sob-Charity Home-2</a></li>
</ul>
</li>
<li>
<a href="#0">Sob Covid</a>
<ul class="submenu">
<li><a href="index-covid.html" target="_blank">Sob-Covid Home-1</a></li>
<li><a href="index-covid-onepage.html" target="_blank">Sob-Covid Home-2</a></li>
</ul>
</li>
<li>
<a href="#0">Sob Education</a>
<ul class="submenu">
<li><a href="index-education-v1.html" target="_blank">Sob-Education Home-1</a></li>
<li><a href="index-education-v2.html" target="_blank">Sob-Education Home-2</a></li>
</ul>
</li>
<li>
<a href="#0">Sob Saas</a>
<ul class="submenu">
<li><a href="index-saas-host.html" target="_blank">Sob-Saas Host</a></li>
<li><a href="index-saas-vpn.html" target="_blank">Sob-Saas Vpn</a></li>
<li><a href="index-saas-app.html" target="_blank">Sob-Saas App</a></li>
<li><a href="index-saas-crypto.html" target="_blank">Sob-Saas Crypto</a></li>
</ul>
</li>
<li><a href="index-dating.html" target="_blank">Sob Dating</a></li>
<li><a href="index-islamic.html" target="_blank">Sob Islamic</a></li>
</ul>
</li>
<li>
<a href="#">Services</a>
<ul class="submenu">
<li><a href="service.html">Service Page</a></li>
<li><a href="service-single.html">Service Details</a></li>
</ul>
</li>
<li>
<a href="#0">Pages</a>
<ul class="submenu">
<li><a href="about.html">About</a></li>
<li><a href="case-study.html">Case Page</a></li>
<li><a href="case-single.html">Case Single</a></li>
<li><a href="search-page.html">Search Result</a></li>
<li><a href="search-none.html">Search Not Found</a></li>
<li><a href="coming-soon.html">Coming Soon</a></li>
<li><a href="404.html">404 Error</a></li>
</ul>
</li>
<li>
<a href="#0">Shop</a>
<ul class="submenu">
<li><a href="shop.html">Shop</a></li>
<li><a href="product-page.html">Product</a></li>
<li><a href="cart-page.html">Cart Page</a></li>
</ul>
</li>
<li>
<a href="#0">Blog</a>
<ul class="submenu">
<li><a href="blog-page.html">Blog</a></li>
<li><a href="blog-single.html">Blog Single</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div class="search-cart">
<div class="search-icon d-none d-md-inline-block">
<i class="icofont-search-1"></i>
</div>
<div class="cart-icon">
<a href="#">
<i class="icofont-bag"></i>
<span>3</span>
</a>
<div class="cart-content">
<ul class="cart-list">
<li class="cart-item">
<div class="cart-inner">
<div class="cart-thumb">
<img src="assets/images/buycart/01.jpg" alt="product">
</div>
<div class="cart-details">
<h6><a href="#">Product Text Here</a></h6>
<p>Quantity: 1 <span>$56</span></p>
<div class="close-btn">
<a href="#"><i class="icofont-close"></i></a>
</div>
</div>
</div>
</li>
<li class="cart-item">
<div class="cart-inner">
<div class="cart-thumb">
<img src="assets/images/buycart/02.jpg" alt="product">
</div>
<div class="cart-details">
<h6><a href="#">Product Text Here</a></h6>
<p>Quantity: 1 <span>$56</span></p>
<div class="close-btn">
<a href="#"><i class="icofont-close"></i></a>
</div>
</div>
</div>
</li>
<li class="cart-item">
<div class="cart-inner">
<div class="cart-thumb">
<img src="assets/images/buycart/01.jpg" alt="product">
</div>
<div class="cart-details">
<h6><a href="#">Product Text Here</a></h6>
<p>Quantity: 1 <span>$56</span></p>
<div class="close-btn">
<a href="#"><i class="icofont-close"></i></a>
</div>
</div>
</div>
</li>
</ul>
<a href="#" class="checkout-btn">
Checkout
</a>
</div>
</div>
</div>
<div class="header-bar d-lg-none">
<span></span>
<span></span>
<span></span>
</div>
<div class="ellepsis-bar d-lg-none">
<i class="icofont-info-square"></i>
</div>
</div>
</div>
</div>
</div>
</header>
<a href="#" class="scrollToTop"><i class="fas fa-angle-double-up"></i></a>
<script src="assets/js/vendors/jquery-3.6.0.min.js"></script>
<script src="assets/js/vendors/modernizr-3.11.2.min.js"></script>
<script src="assets/js/vendors/bootstrap.bundle.min.js"></script>
<script src="assets/js/plugins/all.min.js"></script>
<script src="assets/js/plugins/jquery.waypoints.min.js"></script>
<script src="assets/js/plugins/jquery.counterup.min.js"></script>
<script src="assets/js/plugins/wow.min.js"></script>
<script src="assets/js/plugins/circularProgressBar.min.js"></script>
<script src="assets/js/plugins/isotope.pkgd.min.js"></script>
<script src="assets/js/plugins/lightcase.js"></script>
<script src="assets/js/plugins/swiper-bundle.min.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/demo-view.js"></script>
<script>
window.ga = function () {
ga.q.push(arguments)
};
ga.q = [];
ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('set', 'anonymizeIp', true);
ga('set', 'transport', 'beacon');
ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async></script>
</body>
</html>
CSS Structure
We are using several CSS files in this Template. codexcoder Always follow the latest trends of coding standard. Many browser interpret the default behavior of HTML elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.
CSS Fiile Included
- normalize.css used
- bootstrap.min.css used
- all.min.css used
- animate.css used
- lightcase.css used
- swiper-bundle.min.css used
- icofont.min.css used
- preloder.css used
- main.min.css used
- and some other necessary css files
style.css situated on assets/css/ contain the the all necessary custom style which is well organized and following are the style.css file structure :
/*! <---------------------------------------- Template Name: SobTheme Template URI: https: //themeforest.net/user/CodexCoder Author: CodexCoder Author URI: https: //themeforest.net/user/CodexCoder Description: SobTheme Multipurpose HTML Template. Version: 1.0.0 Tags: multipurpose, dating,agrical,medical,islamic,cripto,nft, agency, blog, business, company, consultancy, Consulting Agency, corporate, creative, finance, marketing, portfolio, professional, responsive, template investment ----------------------------------------> */ /* >>> TABLE OF CONTENTS: <---------------------------------------------------------------- 01. Global css 02. header *Main Menu *Mobile Menu *Page Header *Breadcamp 03. Banner 04. Service * Service Single 05. About 06. Progress 07. Case Study *Case Study Single 08. Advisors 09. Testimonial 10. Faq 11. Achievement 12. Support 13. Blog 14. Product * Related Poduct 15. Cart 16. Blog * Blog Single 17. Contact Us * Contact 18. Newsletter 19. video 20. consulting 21. Counter Up 22. Pricing 23. Sponsor 24. 404 25. Cooming Soon 26. Gmaps Section 27. Footer ----------------------------------------------------------------> */
.header-section {
background: rgba(49, 19, 91, 0.30);
backdrop-filter: blur(20.0px);
-webkit-backdrop-filter: blur(20.0px);
@extend %p-abs;
@extend %w-100;
z-index: 999;
&.header-fixed {
position: fixed;
@extend %w-100;
top: 0;
left: 0;
animation: fadeInDown .5s;
-webkit-animation: fadeInDown .5s;
-moz-animation: fadeInDown .5s;
box-shadow: 0 0 10px rgba($color:$title-color, $alpha:.1);
border-bottom: 1px solid rgba($white-color, $alpha: .10);
z-index: 999;
@include breakpoint(xl) {
top: -48px;
}
@include breakpoint(xl) {
top: -55px;
}
.header-bottom {
@extend %bg-white;
box-shadow: 0 0 10px #49bcf721;
}
}
.header-top {
border-bottom: 1px solid rgba($white-color, $alpha: .10);
* {
color: $white-color;
}
@include breakpoint(max-xl) {
display: none;
background-color: rgba($primary-color, $alpha: .95);
}
.header-top-area {
@extend %flex;
@extend %justify-between;
@extend %align-items-center;
.social-icons {
@extend %m-0;
li {
@extend %p-0;
border-left: 1px solid rgba($white-color, $alpha: .10);
a {
@extend %d-inline-block;
height: 50px;
line-height: 50px;
width: 50px;
background: transparent;
@include border-radius(0);
@extend %text-center;
}
p {
@extend %mb-0;
}
&:first-child {
border-left: none;
@extend %pr-10;
}
&:nth-child(2) {
border-left: none;
}
}
}
.left {
@extend %flex;
margin: 0 -25px;
li {
border-right: 1px solid rgba($white-color, $alpha: .10);
&:last-child {
border-right: none;
}
i {
@extend %mr-5;
}
}
}
@include breakpoint(max-xl) {
.left {
li {
font-size: 14px;
padding: 9px 15px;
}
}
.social-icons {
li {
a {
height: 46px;
line-height: 46px;
width: 46px;
}
}
}
}
@include breakpoint(max-xl) {
.left {
width: 100%;
text-align: center;
justify-content: center;
margin: 0;
border: 1px solid rgba($white-color, $alpha: .10);
li {
flex-grow: 1;
border-top: 1px solid rgba($white-color, $alpha: .10);
border-right: none;
&:first-child {
border-top: none;
}
}
}
.social-icons {
width: 100%;
text-align: center;
justify-content: center;
margin: 0;
border-bottom: 1px solid rgba($white-color, $alpha: .10);
li {
flex-grow: 1;
}
}
}
}
}
Js Structure
We are using several Js files in this Template. codexcoder Always follow the latest trends of coding standard. Many browser interpret the default behavior of HTML elements differently. By using a general reset Js file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.
Js Fiile Included
- jquery-3.6.0.min.js used
- modernizr-3.11.2.min.js used
- bootstrap.bundle.min.js used
- all.min.js used
- jquery.counterup.min.js used
- wow.min.js used
- circularProgressBar.min.js used
- isotope.pkgd.min.js used
- lightcase.js used
- swiper-bundle.min.js used
- main.js used
- and some other necessary css files
functions.js situated on assets/css/ contain the the all necessary custom style which is well organized and following are the functions.js file structure :
(function ($) {
"use strict";
$(document).ready(function () {
/*==== header Section Start here =====*/
$("ul>li>.submenu").parent("li").addClass("menu-item-has-children");
// drop down menu width overflow problem fix
$('ul').parent('li').on('hover', function () {
var menu = $(this).find("ul");
var menupos = $(menu).offset();
if (menupos.left + menu.width() > $(window).width()) {
var newpos = -$(menu).width();
menu.css({
left: newpos
});
}
});
$('.menu li a').on('click', function (e) {
if ($(window).width() < 992) {
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp(300, "swing");
} else {
element.addClass('open');
element.children('ul').slideDown(300, "swing");
element.siblings('li').children('ul').slideUp(300, "swing");
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp(300, "swing");
}
}
});
$('.header-bar').on('click', function () {
$(this).toggleClass('active');
$('.menu').toggleClass('active');
})
$('.ellepsis-bar').on('click', function (e) {
var element = $('.header-top');
if (element.hasClass('open')) {
element.removeClass('open');
element.slideUp(300, "swing");
$('.overlayTwo').removeClass('active');
} else {
element.addClass('open');
element.slideDown(300, "swing");
$('.overlayTwo').addClass('active');
}
});